<template>
  <el-container style="height: 100vh;">
    <el-aside width="95px" style="background-color: rgb(238, 241, 246)">
      <el-menu router :default-active="activePath">
        <el-menu-item disabled style="border-bottom:1px solid; "><i class="el-icon-food" style="font-size:25px;color:green"></i>川味</el-menu-item>
        <el-menu-item @click="saveNavState('/sousuo')" index="sousuo" class="xitong"><i class="el-icon-search"></i>搜索</el-menu-item>
        <el-menu-item @click="saveNavState('/rexiao')" index="rexiao" class="xitong" style="color:red"><span ><i style="color:#CD7F32" class="el-icon-trophy-1"></i>热销榜</span></el-menu-item>
        <el-menu-item @click="saveNavState('/lb_zc')" index="lb_zc">主菜</el-menu-item>
        <el-menu-item @click="saveNavState('/lb_lc')" index="lb_lc">凉菜</el-menu-item>
        <el-menu-item @click="saveNavState('/lb_cf')" index="lb_cf">炒饭</el-menu-item>
        <el-menu-item @click="saveNavState('/lb_xc')" index="lb_xc">小吃</el-menu-item>
        <el-menu-item @click="saveNavState('/lb_yl')" index="lb_yl">饮料</el-menu-item>
        <el-menu-item @click="saveNavState('/lb_jiu')" index="lb_jiu">酒</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: left; font-size: 14px">
        <marquee></marquee>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <footer>
      <el-badge :value="allCount" class="item">
        <i class="el-icon-shopping-cart-2 gouwuche"></i>
      </el-badge>
      <div class="footer-left">金额：
        <span>￥{{allMoney}}</span>
      </div>
      <div class="footer-right" @click="shop">去付款</div>
    </footer>
  </el-container>
</template>

<script>
import myMarquee from './herder/marquee'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      activePath: '',
      lists: ''
    }
  },
  components: {
    marquee: myMarquee
  },
  methods: {
    saveNavState (activePath) {
      sessionStorage.setItem('activePath', activePath)
    },
    shop() {
      this.$router.push('/shop')
    }
  },
  created () {
    this.activePath = sessionStorage.getItem('activePath')
  },
  mounted() {
  },
  computed: {
    ...mapGetters(['allMoney', 'allCount'])
  }
}
</script>

<style type="text/css">

body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

.el-header {
  background-color:#fff;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

#rexiao{
  color: red;
}

.container {
  background: #fff;
  padding: 50px 0;
}
el-main {
  padding: 0px;
  width: 100%;
}

footer {
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 998;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
}
.gouwuche {
  font-size: 30px;
  color: red;
}

.footer-left {
  flex: 1;
  text-align: right;
  line-height: 50px;
  font-size: 16px;
  padding-right: 15px;
}
.footer-left span {
  color: red;
}

.footer-right {
  background: red;
  color: #fff;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>
